<template>
  <div class="home" v-loading="isLoading">
    <div class="top">
      <span class="user_name">Hi，管理员</span>
      <span>公卫单位：玉龙县人民医院</span>
    </div>
    <div
      style="
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        margin-top: -1px;
      "
    >
      <ul style="margin-top: 15px">
        <li class="li_item">
          <p>
            所有在管患者及人群数
            <el-tooltip placement="top">
              <div slot="content">
                责任单位是当前单位，且档案状态为正常、当年<br />失访、当年死亡的人；排除了上一年及之前<br />失访、死亡的人
              </div>
              <i class="el-icon-question" style="float: right"></i>
            </el-tooltip>
          </p>
          <p style="color: #1890ff; font-size: 20px; font-weight: 700">-</p>
        </li>
        <li class="li_item">
          <p>
            本月新增在管人群数
            <el-tooltip placement="top">
              <div slot="content">在管档案中，当年新增（新建、迁入）的人</div>
              <i class="el-icon-question" style="float: right"></i>
            </el-tooltip>
          </p>
          <p style="color: #1890ff; font-size: 20px; font-weight: 700">-</p>
        </li>
        <li class="li_item">
          <p>
            昨日新增在管人群数
            <el-tooltip placement="top">
              <div slot="content">在管档案中，今年有健康体检的人数</div>
              <i class="el-icon-question" style="float: right"></i>
            </el-tooltip>
          </p>
          <p style="color: #1890ff; font-size: 20px; font-weight: 700">-</p>
        </li>
        <li class="li_item">
          <p>
            自我管理患者数
            <el-tooltip placement="top">
              <div slot="content">在管档案中，当年死亡的人</div>
              <i class="el-icon-question" style="float: right"></i>
            </el-tooltip>
          </p>
          <p style="color: #1890ff; font-size: 20px; font-weight: 700">-</p>
        </li>
      </ul>
    </div>
    <div class="main">
      <p style="font-size: 20px; font-weight: 700; color: #000">
        慢病及人群列表
      </p>
      <ul style="padding: 15px" v-if="!isLoading">
        <li class="_item" v-for="(item, index) in list" :key="index">
          <p>
            <span class="fw900">{{ item.name }}</span
            ><span style="float: right"><span class="txt_c">进行中</span></span>
          </p>
          <p>
            <span class="fw900 txt_c mr_10">0</span>管理中<span class="fr"
              ><el-button round size="small" type="teal" @click="to_item"
                >查看明细</el-button
              ><el-button round size="small" type="teal" @click="to_item"
                >管理方案</el-button
              ></span
            >
          </p>
          <p
            style="
              background-color: #eee;
              line-height: 60px;
              padding: 0 5px;
              border-radius: 5px;
              margin-top: 15px;
            "
          >
            所有人数：{{ item.pap }}
            <span class="fr"
              ><el-button round size="small" type="teal2"
                >查看来源</el-button
              ></span
            >
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      list: [
        {
          name: "高血压",
          num: "0",
          pap: "3",
        },
        {
          name: "糖尿病",
          num: "0",
          pap: "0",
        },
        {
          name: "冠心病",
          num: "0",
          pap: "0",
        },
        {
          name: "脑卒中",
          num: "0",
          pap: "0",
        },
        {
          name: "更新",
          num: "0",
          pap: "0",
        },
        {
          name: "更新",
          num: "0",
          pap: "0",
        },
        {
          name: "更新",
          num: "0",
          pap: "0",
        },
      ],
      isLoading: false,
    };
  },
  mounted() {},
  methods: {
    to_item() {
      this.$router.push("/SF/item");
    },
  },
  filters: {
    groupType_to(val) {
      var array = val.split(",");
      var str = [
        {
          id: 1,
          name: "普",
        },
        {
          id: 2,
          name: "儿",
        },
        {
          id: 4,
          name: "孕",
        },
        {
          id: 8,
          name: "老",
        },
        {
          id: 16,
          name: "高",
        },
        {
          id: 32,
          name: "糖",
        },
        {
          id: 64,
          name: "精",
        },
        {
          id: 128,
          name: "肺",
        },
      ];
      var newArry = [];
      for (var i in array) {
        for (var j in str) {
          if (array[i] == str[j].id) {
            newArry.push(str[j].name);
          }
        }
      }
      return newArry.toString();
    },
    chronicType_to(val) {
      if (val.split(",")) {
        var array = val.split(",");
      } else {
        var array = [val];
      }
      var str = [
        {
          id: 2,
          name: "冠心病",
        },
        {
          id: 3,
          name: "慢阻肺",
        },
        {
          id: 7,
          name: "高血压",
        },
        {
          id: 8,
          name: "糖尿病",
        },
        {
          id: 9,
          name: "脑卒中",
        },
      ];
      var newArry = [];
      for (var i in array) {
        for (var j in str) {
          if (array[i] == str[j].id) {
            newArry.push(str[j].name);
          }
        }
      }
      return newArry.toString();
    },
  },
};
</script>
  
  <style scoped lang="scss">
.home {
  .top {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    .user_name {
      display: inline-block;
      font-weight: 700;
      font-size: 20px;
      color: #000;
      padding: 0 20px;
      margin-right: 50px;
    }
  }
  .li_item {
    display: inline-block;
    background: url(https://yngw-phlnewadmin.yiboshi.com/static/1686134276923/img/indexStatisBg.38834396.png)
      no-repeat;
    background-color: #f8fafc;
    width: 15.5%;
    margin-right: 1.4%;
    padding: 12px;
    border-radius: 4px;
  }
  .main {
    margin: 10px;
    padding: 25px 15px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    .btn_sty {
      font-size: 18px;
    }
    ._item {
      display: inline-block;
      width: 30%;
      padding: 15px;
      border: 1px solid teal;
      margin: 8px;

      .fw900 {
        font-weight: 700;
        color: #000;
        font-size: 20px;
      }
      .txt_c {
        color: teal;
      }
      .mr_10 {
        display: inline-block;
        margin-right: 10px;
      }
      .fr {
        float: right;
      }
    }
  }
}
.el-button--teal {
  color: #fff;
  background-color: teal;
  border-color: teal;
  font-weight: 900;
}
.el-button--teal2 {
  color: teal;
  background-color: #fff;
  border-color: #fff;
  font-weight: 900;
  border: 1px solid teal;
}
</style>